{% extends 'layout/manage.html' %} 
{% load static %} 
{% block css %}
<style>
    .panel-default .panel-heading {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .panel-default>.panel-heading a {
        text-decoration: none;
    }
    
    .panel-default>.panel-heading span {
        padding: 0 5px;
    }
    
    .panel-default>.panel-heading .function .upload {
        overflow: hidden;
    }
    
    .panel-default>.panel-heading .function .upload input {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 76px;
        left: -2px;
        overflow: hidden;
    }
    
    .upload-progress {
        position: fixed;
        right: 2px;
        bottom: 2px;
        width: 400px;
    }
    
    .upload-progress .progress-error {
        color: red;
    }
    
    .upload-progress .progress-error {
        color: red;
    }
</style>
{% endblock %} 
{% block content %}
<div class='container-fluid' style="margin-top:20px">
    <div class="bs-example" data-example-id="table-within-panel">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <div>
                    <a href="{% url 'web:file' project_id=request.saas.project.id %}">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>文件库</span>
                    </a>
                    {% for record in breadcrumb_list %}
                    <a href="{% url 'web:file' project_id=request.saas.project.id %}?folder_id={{ record.id }}">
                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                        <span>{{ record.name }}</span>
                    </a>
                    {% endfor %}
                </div>
                <div class="function">
                    <div class="btn btn-primary btn-xs upload" style="position: relative">
                        <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>
                        <input type="file" multiple name="uploadFile" id="uploadFile">
                    </div>
                    <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="新建文件夹">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
                    </a>
                </div>
            </div>


            <!-- Table -->
            <table class="table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>文件大小</th>
                        <th>更新者</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="rowList">
                    {% for item in file_object_list %}
                    <tr>
                        <td>
                            {% if item.file_type == 1 %}
                            <i class="fa fa-file" aria-hidden="true"></i> {{ item.name }}
                            {% else %}
                            <a href="{% url 'web:file' project_id=request.saas.project.id %}?folder_id={{ item.id }}">
                                <i class="fa fa-folder"  aria-hidden="true"></i> 
                                {{ item.name }}
                            </a>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.file_type == 1 %} 
                                {{ item.file_size }} 
                            {% else %}
                                - 
                            {% endif %}
                        </td>
                        <td>{{ item.update_user.username }}</td>
                        <td>{{ item.update_datetime }}</td>
                        <td>
                            {% if item.file_type == 2 %}
                            <a class="btn btn-default btn-xs" data-toggle="modal" data-target="#addModal" data-name="{{ item.name }}" data-fid="{{ item.id }}" data-whatever="修改文件夹">
                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                            </a>
                            {% else %}
                                <a class="btn btn-default btn-xs download" href="{% url 'web:file_download' project_id=request.saas.project.id file_id=item.id %}">
                                    <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                </a>
                            {% endif %}

                            <a class="btn btn-danger btn-xs" data-toggle="modal" data-target="#alertModal" data-name="{{ item.name }}" data-fid="{{ item.id }}" data-whatever="删除文件夹">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">

                <form id='form'>
                    {% csrf_token %}
                    <input class="hide" type="text" name="fid" id="fid"> {% for filed in form %}
                    <div class="form-group">

                        <label for="filed.id_for_label">{{ filed.label }}</label> {{filed}}
                        <span class='error-msg'>{{ filed.errors.0 }}</span>
                    </div>
                    {% endfor %}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                <button id="btnFormSubmit" type="button" class="btn btn-primary">确 定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">

        <div class="alert alert-danger alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4>是否要确定删除!</h4>
            <p style='padding-top:20px;padding-bottom:20px'>
                文件夹中包含的所有文件都会被删除！！！
            </p>
            <p>
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                <button id="btnDelete" type="button" class="btn btn-danger">确 定</button>
            </p>
        </div>

    </div>
</div>

<!--进度条-->
<div id="uploadProgress" class="upload-progress hide">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传进度
        </div>

        <table class="table">
            <tbody id="progressList">
             
            </tbody>
        </table>
    </div>
</div>

<!--进度条模板-->
<div class="hide">
    <table id="progressTemplate">
        <tr>
            <td>
                <div class="name"></div>
                <div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                        0%
                    </div>
                </div>
                <div class="progress-error"></div>
            </td>
        </tr>
    </table>
</div>

<!--文件上传成功页面展示模板-->
<div class="hide">
        <table id="rowTpl">
            <tr>
                <td>
                    <i class="fa fa-file" aria-hidden="true"></i>
                    <span class="name"></span>
                </td>
                <td class="file_size"></td>
                <td class="username"></td>
                <td class="datetime"></td>
                <td>

                    <a class="btn btn-default btn-xs download">
                        <i class="fa fa-cloud-download" aria-hidden="true"></i>
                    </a>

                    <a class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#alertModal">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </a>
                </td>
            </tr>
        </table>
    </div>

{% endblock %} {% block js %}
<script src="{% static 'js/cos-js-sdk-v5.min.js' %}"></script>
<script>
    var FILE_DELETE_URL = "{% url 'web:file_delete' project_id=request.saas.project.id %}";
    var COS_CREDENTIAL = "{% url 'web:cos_credential' project_id=request.saas.project.id %}";
    var FILE_POST = "{% url 'web:file_post' project_id=request.saas.project.id %}";
    var CURRENT_FOLDER_ID = "{{ folder_object.id }}";

    $(function() {
        initAddModal();
        bindModelSubmit();
        bindDeletSubmit();
        bindUploadFile();
    });

    function initAddModal() {
        $('#addModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var name = button.data('name'); // Extract info from data-* attributes
            var fid = button.data('fid'); // Extract info from data-* attributes
            var recipient = button.data('whatever'); // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            modal.find('.modal-title').text(recipient);

            if (fid) {
                // 编辑
                modal.find('#id_name').val(name);
                modal.find('#fid').val(fid);
            } else {
                // 新建
                modal.find('.error-msg').empty();
                $('#form')[0].reset();
            }
        });
        $('#alertModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var fid = button.data('fid'); // Extract info from data-* attributes
            $('#btnDelete').attr('fid', fid);

        })
    }

    function bindModelSubmit() {
        $('#btnFormSubmit').click(function() {
            $.ajax({
                url: location.href,
                type: "POST",
                data: $("#form").serialize(),
                dataType: "JSON",
                success: function(res) {
                    if (res.status) {
                        location.href = location.href;
                    } else {
                        $.each(res.error, function(key, value) {
                            $("#id_" + key).next().text(value[0]);
                        })
                    }
                }
            })
        })
    }

    function bindDeletSubmit() {
        $('#btnDelete').click(function() {
            // 获取要删除那行ID
            $.ajax({
                url: FILE_DELETE_URL,
                type: "GET",
                data: {
                    fid: $(this).attr('fid')
                },
                success: function(res) {
                    if (res.status) {
                        location.href = location.href;
                    }
                }
            })
        })
    }

    function bindUploadFile() {
        $('#uploadFile').change(function() {
            // 每次上传完毕之后清空之前上传记录，重新进行下一次上传
            $('#progressList').empty();

            var fileList = $(this)[0].files;
            // 获取本次要上传的每个文件 名称&大小
            var checkFileList = [];
            $.each(fileList, function(index, fileObject) {
                checkFileList.push({
                    'name': fileObject.name,
                    'size': fileObject.size
                })
            });
            
            // 把这些数据发送到django后台：Django后台进行容量的校验，如果么有问题则返回临时凭证；否则返回错误信息；
            var cos_credential = new COS({
                getAuthorization: function (options, callback) {
                    // 向django后台发送请求，获取临时凭证
                    $.post(COS_CREDENTIAL,JSON.stringify(checkFileList),function (res) {
                    
                        if (res.status) {
                            var credentials = res.data && res.data.credentials;
                                if (!res.data || !res.data.credentials) return console.error('credentials invalid');
                                callback({
                                    TmpSecretId: credentials.tmpSecretId,
                                    TmpSecretKey: credentials.tmpSecretKey,
                                    XCosSecurityToken: credentials.sessionToken,
                                    StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                                    ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000900
                                });
                                // 授权成功才在页面上显示进度条
                                $('#uploadProgress').removeClass('hide');
                        }else { 
                            alert(res.error);
                        }
                    })
                }
            })
        
            // 上传文件（上传之前先获取临时凭证
            $.each(fileList, function(index, fileObject) {
                var fileName = fileObject.name;
                var fileSize = fileObject.size;
                var key = (new Date()).getTime() + "_" + fileName;

                var tr = $('#progressTemplate').find('tr').clone();
                tr.find('.name').text(fileName);
                $('#progressList').append(tr);

                // 上传文件（异步）
                cos_credential.putObject({
                    Bucket: '{{ request.saas.project.bucket }}',
            
                    Region: '{{ request.saas.project.region }}',

                    Key: key,
           
                    Body: fileObject, // 上传文件对象
                    onProgress: function(progressData) {
                        console.log("文件上传进度---------->",fileName,JSON.stringify(progressData));
                        var percent = progressData.percent * 100 + '%';
                        tr.find('.progress-bar').text(percent);
                        tr.find('.progress-bar').css('width', percent);
                    }
                }, function(err, data) {
                    console.log(err || data)
                    if (data && data.statusCode == 200){
                        // 上传成功，将本次上传文件信息发送后台校验并写入数据库
                        // 当前文件上传成功
                        $.post(FILE_POST,{
                            name:fileName,
                            file_size:fileSize,
                            key:key,
                            parent: CURRENT_FOLDER_ID,
                            etag:data.ETag,
                            file_path: data.Location
                        },function (res) {
                            console.log(res);
                            // 在数据库中写入成功，将已添加的数据在页面动态展示
                            console.log('res------------->',res);
                            var newTr = $('#rowTpl').find('tr').clone();
                            newTr.find('.name').text(res.data.name);
                            newTr.find('.file_size').text(res.data.file_size);
                            newTr.find('.username').text(res.data.username);
                            newTr.find('.datetime').text(res.data.datetime);
                            newTr.find('.delete').attr('data-fid', res.data.id);
                            newTr.find('.download').attr('href', res.data.download_url);
                            $('#rowList').append(newTr);

                            // 自己的进度删除
                            tr.remove();
                            //location.href = location.href;
                        })
                    } else {
                        tr.find('.progress-error').text('上传失败');
                    }
                   
                });
            })
           
        });
    }
</script>
{% endblock %}